uni

2023-10-01 13:58| 来源: 网络整理| 查看: 265

最近开发小程序的时候、需要嵌入一个第三方网站、并且和第三方网站有些交互。这个第三方页面本身就是一个 HTML 页面、想着把它给嵌入到 uni-app 中，结果没实现…（很多的 js 代码在小程序中不识别）。

最后采用 web-view 方式来跳转到第三方页面、这就触发了页面之间互相通信的问题

官方中有一篇文章 https://ask.dcloud.net.cn/article/35083 详细介绍了在 web-view 加载的本地及远程 HTML 中调用 uni 的API及网页和 vue 页面是如何通讯的方法、但是似乎是 H5 向 uni-app 进行发送数据、并没有介绍 uni-app 如何发送数据到 H5,

那么 uni-app 如何发送数据到 H5？其实很简单、在 web-view 中只需要通过 URL 就可以向 H5 进行传参例如在 uni-app 中：

export default { data() { return { webviewStyles: { progress: { color: '#FF3333' } }, url: 'https://youji.laravelcode.cn/map/index.html?data=' + '我是向H5发送的数据' } }, onLoad(options) { if (options && options.url) { this.url = options.url; } }, methods: { } }

那么在 H5 中是如何接收值得呢？

uni-app-web-view navigateTo redirectTo navigateBack reLaunch switchTab postMessage getEnv document.addEventListener('UniAppJSBridgeReady', function() { document.querySelector('.btn-list').addEventListener('click', function(evt) { var target = evt.target; if (target.tagName === 'BUTTON') { var action = target.getAttribute('data-action'); switch (action) { case 'switchTab': uni.switchTab({ url: '/pages/index/index' }); break; case 'navigateBack': uni.navigateBack({ delta: 1 }); break; case 'postMessage': uni.postMessage({ data: { action: getQuery('data'), } }); break; case 'getEnv': uni.getEnv(function(res) { alert('当前环境：' + JSON.stringify(res)); }); break; default: uni[action]({ url: '/pages/editImg/editImg' }); break; } } }); }); console.log(getQuery('data')); //获取 uni-app 传来的值 function getQuery(name) { // 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在） let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); let r = window.location.search.substr(1).match(reg); if(r != null) { // 对参数值进行解码 return unescape(r[2]); } return null; }

以上 Html 文件包含页面跳转、接收 uni-app 的传值、以及发送数据到 uni-app

关于 web-view 如何使用就不过多介绍了、官网文章很详细 http://ask.dcloud.net.cn/article/35083 https://uniapp.dcloud.io/component/web-view

转载：https://cloud.tencent.com/developer/article/1555077

【本文地址】

uni

uni

今日新闻

推荐新闻